<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    {% block title %}
    {% endblock %}
    <link rel="stylesheet" href="/resource/lightbox/css/screen.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="/resource/lightbox/css/lightbox.css" type="text/css" media="screen" />

    <script src="/resource/lightbox/js/prototype.js" type="text/javascript"></script>
    <script src="/resource/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="/resource/lightbox/js/lightbox.js" type="text/javascript"></script>

    <script type="text/javascript">

        document.observe('dom:loaded', function () {
            $$('.contact-link').each(
                    function(e){
                        Event.observe( e, 'click', function(){
                            var foo = ('lokes' + 'h.dhakar@' + 'gmail.c' +'om')
                            window.location.href = 'mailto:' + foo; return false;
                        })
                    }
            );
        });

    </script>
    <style type="text/css">
        body {color: #efd; background: #453; padding: 0 5em; margin: 0}
        h1 {padding: 2em 1em; background: #675}
        h2 {color: #bf8; border-top: 1px dotted #fff; margin-top: 2em}
        p {margin: 1em 0}
    </style>
    <style type="text/css">
        #menu
        {
            width:300px;
            margin:auto;
        }
        #div1
        {
            display:none;
            font-size:12px;
            position:relative;
            left:0px;
            top:0px;
            background-color:White;
            padding:5px 10px 0px 10px;
            width:120px;
        }
        #div2
        {
            display:none;
            font-size:12px;
            position:relative;
            left:50px;
            top:0px;
            background-color:White;
            padding:5px 10px 0px 10px;
            width:320px;
        }
        #div3
        {
            display:none;
            font-size:12px;
            position:relative;
            left:120px;
            top:0px;
            background-color:White;
            padding:5px 10px 0px 10px;
            width:320px;
        }
        #div4
        {
            display:none;
            font-size:12px;
            position:relative;
            left:200px;
            top:0px;
            background-color:White;
            padding:5px 10px 0px 10px;
            width:320px;
        }
    </style>
    <script language="javascript" type="text/javascript">
        //显示层
        function showDiv(divName)
        {
            document.getElementById(divName).style.display = "block";
        }
        //隐藏层
        function hiddenDiv(divName)
        {
            document.getElementById(divName).style.display = "none";
        }
    </script>
</head>
<body>
    <div id="menu">
        <a href="#" onmouseover="showDiv('div1')" onmouseout="hiddenDiv('div1')">CARTOON</a>
        |
        <a href="#" onmouseover="showDiv('div2')" onmouseout="hiddenDiv('div2')">菜单二</a>
        |
        <a href="#" onmouseover="showDiv('div3')" onmouseout="hiddenDiv('div3')">菜单三</a>
        |
        <a href="#" onmouseover="showDiv('div4')" onmouseout="hiddenDiv('div4')">菜单四</a>
        <div id="div1" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">
            <ul>
            <li><a href="/cartoon/addcartoon/" target="_blank">新增</a></li>
            <li><a href="/cartoon/search/" target="_blank">搜索</a></li>
            </ul>
        </div>
        <div id="div2" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">
            <a href="#">子菜单一</a>
            <a href="#">子菜单二</a>
        </div>
        <div id="div3" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">
            <a href="#">子菜单一</a>
            <a href="#">子菜单二</a>
            <a href="#">子菜单三</a>
        </div>
        <div id="div4" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">
            <a href="#">子菜单一</a>
            <a href="#">子菜单二</a>
            <a href="#">子菜单三</a>
            <a href="#">子菜单四</a>
        </div>
    </div>
    {% block content %}
    {% endblock %}
</body>
</html>